﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <!--<script src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>-->
    <script src="js/libs/jquery-1.7.1.min.js"></script>
    <script src="js/libs/underscore.js"></script>
    <script src="js/libs/backbone.js"></script>
    <script src="myjs/MyObject.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            example5();
        });

        function example1() {
            var ListView = Backbone.View.extend({
                el: $('#div1'),

                initialize: function () {
                    _.bindAll(this, 'render');
                    this.render();
                },

                render: function () {
                    $(this.el).append("<ul><li>hello world!</li></ul>");
                }
            });

            var listview = new ListView();
        }

        function example2() {
            var ListView = Backbone.View.extend({
                el: $('body'),

                events: {
                    'click button#add': 'addItem'
                },

                initialize: function () {
                    _.bindAll(this, 'render', 'addItem');
                    this.counter = 0;
                    this.render();
                },

                render: function () {
                    $(this.el).append("<button id='add'>Add New Item</button>");
                    $(this.el).append("<ul></ul>");
                },

                addItem: function () {
                    this.counter++;
                    $('ul', this.el).append("<li>hello world" + this.counter + "</li>");
                }
            });

            var listview = new ListView();
        }

        function example3() {
            var Item = Backbone.Model.extend({
                defaults: {
                    part1: 'hello',
                    part2: 'world'
                }
            });

            var List = Backbone.Collection.extend({
                model: Item
            });

            var ListView = Backbone.View.extend({
                el: $('body'),
                events: {
                    'click button#add': 'addItem'
                },
                initialize: function () {
                    //$(this.el).append("<button id='add'>Add list item</button>");
                    _.bindAll(this, 'render', 'addItem', 'appendItem'); // remember: every function that uses 'this' as the current object should be in here

                    this.collection = new List();
                    this.collection.bind('add', this.appendItem); // collection event binder

                    this.counter = 0;
                    this.render();
                },

                render: function () {
                    var self = this;
                    $(this.el).append("<button id='add'>Add list item</button>");
                    $(this.el).append("<ul></ul>");
                    _(this.collection.models).each(function (item) { // in case collection is not empty
                        self.appendItem(item);
                    }, this);
                },

                addItem: function () {
                    this.counter++;
                    var item = new Item();
                    item.set({
                        part2: item.get('part2') + this.counter // modify item defaults
                    });
                    this.collection.add(item); // add item to collection; view is updated via event 'add'
                },

                appendItem: function (item) {
                    $('ul', this.el).append("<li>" + item.get('part1') + " " + item.get('part2') + "</li>");
                }

            });

            var listview = new ListView();
        }

        function example4() {
            var Item = Backbone.Model.extend({
                defaults: {
                    part1: 'hello',
                    part2: 'world'
                }
            });

            var List = Backbone.Collection.extend({
                model: Item
            });

            var ItemView = Backbone.View.extend({
                tagName: 'li', // name of (orphan) root tag in this.el
                initialize: function(){
                  _.bindAll(this, 'render'); // every function that uses 'this' as the current object should be in here
                },
                render: function(){
                  $(this.el).html('<span>'+this.model.get('part1')+' '+this.model.get('part2')+'</span>');
                  return this; // for chainable calls, like .render().el
                }
              });

              var ListView = Backbone.View.extend({
                  el: $('body'), // el attaches to existing element
                  events: {
                      'click button#add': 'addItem'
                  },
                  initialize: function () {
                      _.bindAll(this, 'render', 'addItem', 'appendItem'); // every function that uses 'this' as the current object should be in here

                      this.collection = new List();
                      this.collection.bind('add', this.appendItem); // collection event binder

                      this.counter = 0;
                      this.render();
                  },
                  render: function () {
                      var self = this;
                      $(this.el).append("<button id='add'>Add list item</button>");
                      $(this.el).append("<ul></ul>");
                      _(this.collection.models).each(function (item) { // in case collection is not empty
                          self.appendItem(item);
                      }, this);
                  },
                  addItem: function () {
                      this.counter++;
                      var item = new Item();
                      item.set({
                          part2: item.get('part2') + this.counter // modify item defaults
                      });
                      this.collection.add(item);
                  },
                  appendItem: function (item) {
                      var itemView = new ItemView({
                          model: item
                      });
                      $('ul', this.el).append(itemView.render().el);
                  },

              });

          var listView = new ListView();
        }

        function example5() {
            Backbone.sync = function(method, model, success, error){ 
                success();
            }
            
            var Item = Backbone.Model.extend({
                defaults: {
                    part1: 'hello',
                    part2: 'world'
                }
            });

            var List = Backbone.Collection.extend({
                model: Item
            });

            var ItemView = Backbone.View.extend({
                tagName: 'li', // name of (orphan) root tag in this.el
                events: { 
                  'click span.swap':  'swap',
                  'click span.delete': 'remove'
                },  
                initialize: function(){
                    _.bindAll(this, 'render', 'unrender', 'swap', 'remove'); // every function that uses 'this' as the current object should be in here

                    this.model.bind('change', this.render);
                    this.model.bind('remove', this.unrender);
                },
                render: function(){
                  $(this.el).html('<span style="color:black;">'+this.model.get('part1')+' '+this.model.get('part2')+'</span> &nbsp; &nbsp; <span class="swap" style="font-family:sans-serif; color:blue; cursor:pointer;">[swap]</span> <span class="delete" style="cursor:pointer; color:red; font-family:sans-serif;">[delete]</span>');
                  return this; // for chainable calls, like .render().el
                },
                unrender: function(){
                  $(this.el).remove();
                },
                swap: function(){
                  var swapped = {
                    part1: this.model.get('part2'), 
                    part2: this.model.get('part1')
                  };
                  this.model.set(swapped);
                },
                remove: function(){
                  this.model.destroy();
                }
              });

              var ListView = Backbone.View.extend({
                  el: $('body'), // el attaches to existing element
                  events: {
                      'click button#add': 'addItem'
                  },
                  initialize: function () {
                      _.bindAll(this, 'render', 'addItem', 'appendItem'); // every function that uses 'this' as the current object should be in here

                      this.collection = new List();
                      this.collection.bind('add', this.appendItem); // collection event binder

                      this.counter = 0;
                      this.render();
                  },
                  render: function () {
                      var self = this;
                      $(this.el).append("<button id='add'>Add list item</button>");
                      $(this.el).append("<ul></ul>");
                      _(this.collection.models).each(function (item) { // in case collection is not empty
                          self.appendItem(item);
                      }, this);
                  },
                  addItem: function () {
                      this.counter++;
                      var item = new Item();
                      item.set({
                          part2: item.get('part2') + this.counter // modify item defaults
                      });
                      this.collection.add(item);
                  },
                  appendItem: function (item) {
                      var itemView = new ItemView({
                          model: item
                      });
                      $('ul', this.el).append(itemView.render().el);
                  },

              });

          var listView = new ListView();
        }

    </script>
</head>
<body>
</body>
</html>
